<script setup lang="ts">
import { listOrder } from '@/api/wms/order';
import { OrderVO, OrderQuery } from '@/api/wms/order/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

/** 当前单据 */
const currentOrder = ref<OrderVO>();
const currentOrderId = ref<string | number>();

/** 选择单据弹框 */
const searchOrderDialog = reactive({
  orderList: <OrderVO[]>[],
  total: 0,
  loading: true,
  open: false,
  queryParams: <OrderQuery>{
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    typeId: undefined
  }
});

/** 查询单据列表 */
async function getOrderList() {
  searchOrderDialog.loading = true;
  const res = await listOrder(searchOrderDialog.queryParams);
  searchOrderDialog.orderList = res.rows;
  searchOrderDialog.total = res.total;
  searchOrderDialog.loading = false;
}

/** 选择单据 */
function handleCurrentChange(val: OrderVO | undefined) {
  val ? (currentOrder.value = val) : (currentOrder.value = undefined);
}

/** 确认单据，关闭弹框 */
function handleSelected() {
  if (!currentOrder.value?.id) {
    proxy?.$modal.msgError('请选择数据');
    return;
  }
  currentOrderId.value = currentOrder.value.id;
  emit('changeOrder', currentOrder);
  searchOrderDialog.open = false;
}

/** 打开选择单据弹框 */
function searchOrder() {
  searchOrderDialog.queryParams.pageNum = 1;
  getOrderList();
  searchOrderDialog.open = true;
}

/** 搜索按钮操作 */
function handleQuery() {
  searchOrderDialog.queryParams.pageNum = 1;
  getOrderList();
}
/** 重置按钮操作 */
function resetQuery() {
  searchOrderDialog.queryParams = {
    pageNum: 1,
    pageSize: 10
  };
  handleQuery();
}

const emit = defineEmits(['changeOrder']);
</script>

<template>
  <div>
    <el-input :style="{ width: '200px'}" readonly v-model="currentOrderId" placeholder="请选择单据编号">
      <template #prepend>
        <el-button icon="Search" @click="searchOrder"></el-button>
      </template>
    </el-input>
    <el-dialog title="请选择单据编号" v-model="searchOrderDialog.open" width="800px" append-to-body>
      <el-form :model="searchOrderDialog.queryParams" :inline="true">
        <el-form-item label="单据名称">
          <el-input
            placeholder="请输入单据名称"
            v-model="searchOrderDialog.queryParams.name"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="单据类型">
          <el-input
            placeholder="请输入单据类型"
            v-model="searchOrderDialog.queryParams.typeId"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
        </el-form-item>
      </el-form>

      <el-row>
        <el-table :data="searchOrderDialog.orderList" highlight-current-row @current-change="handleCurrentChange">
          <el-table-column label="单据编号" align="center" prop="id" />
          <el-table-column label="单据名称" align="center" prop="name" />
          <el-table-column label="单据类型" align="center" prop="typeId" />
          <el-table-column label="客户/供应商" align="center" prop="partnerId" />
        </el-table>
      </el-row>
      <pagination
        v-show="searchOrderDialog.total > 0"
        :total="searchOrderDialog.total"
        v-model:page="searchOrderDialog.queryParams.pageNum"
        v-model:limit="searchOrderDialog.queryParams.pageSize"
        @pagination="getOrderList"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSelected">确 定</el-button>
          <el-button @click="searchOrderDialog.open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
</style>